<script setup lang="ts">
import {
  isDarkMode,
  isSystemPromptOpen,
  toggleSettingsPanel,
  toggleSystemPromptPanel
} from "@/views/domain/knowledge/config/ollama";
import { useChats } from "@/views/domain/knowledge/store/chat";

const {
  sortedChats,
  activeChat,
  switchChat,
  deleteChat,
  startNewChat,
  wipeDatabase
} = useChats();

const onNewChat = () => {
  checkSystemPromptPanel();
  return startNewChat("New chat");
};

const onSwitchChat = (chatId: number) => {
  checkSystemPromptPanel();
  return switchChat(chatId);
};

const checkSystemPromptPanel = () => {
  isSystemPromptOpen.value = false;
};
</script>

<template>
  <div class="flex h-full">
    <div class="side-body">
      <div class="mx-2 mb-2">
        <button
          class="flex w-full items-center justify-center gap-x-2 rounded-md bg-blue-600 px-4 py-3 text-sm font-medium text-white shadow-sm transition-all duration-200 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-offset-gray-900"
          @click="onNewChat"
        >
          <Plus class="h-5 w-5" />
          <span>New Chat</span>
        </button>
      </div>

      <div
        class="h-full space-y-4 overflow-y-auto border-b border-gray-200 px-2 py-4 dark:border-gray-800"
      >
        <div
          v-for="chat in sortedChats"
          :key="chat.id"
          :class="{
            'bg-gray-100 dark:bg-gray-800': activeChat?.id == chat.id
          }"
          class="flex w-full flex-col gap-y-1 rounded-md px-3 py-2 text-left transition-colors duration-100 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-300 dark:hover:bg-gray-700 dark:focus:ring-blue-500"
          @click="onSwitchChat(chat.id)"
          @keyup.delete="deleteChat(chat.id)"
        >
          <span
            class="text-sm font-medium leading-none text-gray-900 dark:text-gray-100 chat-item-title"
          >
            <el-text>
              {{ chat.name }}
            </el-text>
            <el-button
              text
              icon="Delete"
              type="danger"
              @click.stop="deleteChat(chat.id)"
            />
          </span>
          <span
            :key="chat.model"
            class="text-xs leading-none text-gray-700 dark:text-gray-300"
          >
            {{ chat.model }}
          </span>
          <span class="text-xs leading-none text-gray-700 dark:text-gray-300">
            {{
              chat.createdAt.toLocaleDateString("no", {
                day: "2-digit",
                month: "short",
                weekday: "long",
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit"
              })
            }}
          </span>
        </div>
      </div>

      <div v-if="false" class="mt-auto w-full space-y-2 px-2 py-4">
        <button
          class="group flex w-full items-center gap-x-2 rounded-md px-3 py-2 text-left text-sm font-medium text-gray-900 transition-colors duration-100 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-300 dark:hover:bg-gray-700 dark:focus:ring-blue-500"
          @click="isDarkMode = !isDarkMode"
        >
          <Sunny
            v-if="isDarkMode"
            class="size-4 opacity-50 group-hover:opacity-80"
          />
          <Moon v-else class="size-4 opacity-50 group-hover:opacity-80" />

          Toggle dark mode
        </button>
        <button
          class="group flex w-full items-center gap-x-2 rounded-md px-3 py-2 text-left text-sm font-medium text-gray-900 transition-colors duration-100 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-300 dark:hover:bg-gray-700 dark:focus:ring-blue-500"
          @click="wipeDatabase"
        >
          <Delete class="size-4 opacity-50 group-hover:opacity-80" />

          Delete chats
        </button>
        <button
          v-if="false"
          class="group flex w-full items-center gap-x-2 rounded-md px-3 py-2 text-left text-sm font-medium text-gray-900 transition-colors duration-100 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-300 dark:hover:bg-gray-700 dark:focus:ring-blue-500"
        >
          <Avatar class="size-4 opacity-50 group-hover:opacity-80" />
          User
        </button>
        <button
          class="group flex w-full items-center gap-x-2 rounded-md px-3 py-2 text-left text-sm font-medium text-gray-900 transition-colors duration-100 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-300 dark:hover:bg-gray-700 dark:focus:ring-blue-500"
          @click="toggleSystemPromptPanel"
        >
          <NodeBook class="size-4 opacity-50 group-hover:opacity-80" />

          System prompt
        </button>
        <button
          class="group flex w-full items-center gap-x-2 rounded-md px-3 py-2 text-left text-sm font-medium text-gray-900 transition-colors duration-100 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-300 dark:hover:bg-gray-700 dark:focus:ring-blue-500"
          @click="toggleSettingsPanel"
        >
          <Setting class="size-4 opacity-50 group-hover:opacity-80" />

          Settings
        </button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.side-body {
  height: 100%;
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow-y: auto;
  border-color: var(--el-border-color);
  border-right-width: 1px;
  background-color: var(--el-bg-color);
  padding-top: 0.5rem;
}

.chat-item {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: start;
  justify-content: start;
  background-color: var(--el-bg-color-page);
  padding: 4px;
}

.chat-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .title {
    padding: 4px 0 !important;
  }
}
</style>
